<template>
<div class="flexTalk" @click.stop>
  <div>
    <a-card title="Contact us" style="margin-bottom: 20px" class="card" :style="{display: showCard ? 'block' : 'none'}">
      <div class="talkAll" v-if="signIn">
        <div class="talkPart">
            <div class="sentencePart" ref="sentencePart">
            <table>
                <span v-for="(sentence,index) in sentenceList" :key="index" style="width:100%;display:block">
                    <tr v-if="sentence.admin==false">
                        <td style="background-color:white;width:50%"></td>
                        <td><h1 class="type1">{{sentence.content}}</h1></td>
                    </tr>
                    <tr v-else>
                        <td><h1 class="type2">{{sentence.content}}</h1></td>
                        <td style="background-color:white;width:50%"></td>
                    </tr>
                </span>
            </table>
            </div>
            <div class="sendPart">
                <div style="width:400px;display:flex">
                    <a-form-item style="width:200px;margin:0">
                        <a-input  :value="value" @change="handleChange" style="resize:none;width:300px;margin:0px;" @keydown.enter.native.prevent="handleSubmit"/>
                    </a-form-item>
                    <a-form-item>
                        <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit" style="color: #efe7db !important;border-radius: 8px;border: 3px solid #efe7db;cursor: pointer;transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);float:left;top:1px;left:115px;background-color:rgb(80, 126, 100, 0.78);">
                        发送
                        </a-button>
                    </a-form-item>
                </div>
            </div>
        </div>
      </div>
      <div v-else class="message">
        Sorry, you might have to <nuxt-link @click.native="$emit('update:showCard', !showCard)" class="login" to="/login">login</nuxt-link> first
      </div>
      <div style="width: 16px; height: 16px; position: absolute; bottom: -5px; right: 13px; background-color: white; transform: rotate(45deg);"></div>
    </a-card>
  </div>
  <a-button type="primary" shape="circle" icon="mail" size="large" ghost @mousedown="$emit('update:showCard', !showCard)" @click="updateTalkList" style="color: #507e64; border-color: #507e64; float: right"/>
</div>

</template>
<script>
import moment from 'moment'
import {mapActions,mapState,mapMutations} from 'vuex'
export default {
  computed:{
    ...mapState({
      talkUpdate: 'talkUpdate',
      account:state=> state.account.account,
      signIn: state => state.account.signIn
    })
  },
  data() {
    return {
      collapsed: false,
      comments: [],
      submitting: false,
      value: '',
      moment,
      sentenceList:[
      ],
      display: 'none'
    };
  },
  props: {
    showCard: {
      type: Boolean,
      default: false
    }
  },
  watch:{
    talkUpdate:{
      immediate:true,
      handler(newVal){
        if(newVal)
        {
          this.updateTalkList()
        }
      }
    },
    showCard: {
      immediate: true,
      handler(newVal) {
        let self = this
        if(newVal === false) {
          setTimeout(() => {
            self.display = 'none'
          }, 300)
        }
        else {
          self.display = 'block'
        }
      }
    }
  },
  methods: {
    ...mapActions({
      getTalkList:'talk/getTalkList',
      insertSentence:'talk/insertSentence',
    }),
    ...mapMutations({
      finishUpdate: 'finishUpdate'
    }),
    handleSubmit() {
      if (!this.value||this.value==null) {//用户的admin为0
        this.openNotification('NOK','发送信息错误','请勿发送空信息!')
        return;
      }
      this.insertSentence({username:this.account.username,admin:0,content:this.value}).then((res)=>{
        this.updateTalkList()
        //  console.log(res)
      },(error)=>{
        this.openNotification('NOK','发送信息失败','服务器开了会儿小差,请重新发送!')
      })
      this.submitting = true;

      setTimeout(() => {
        this.submitting = false;
        this.comments = [
          {
            author: 'Han Solo',
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: this.value,
            datetime: moment().fromNow(),
          },
          ...this.comments,
        ];
        this.value = '';
      }, 1000);
    },
    handleChange(e) {
      this.value = e.target.value;
    },
     toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    updateTalkList() {
      if(!this.signIn || this.account === null) {
        return
      }
      this.getTalkList(this.account.username).then((res) => {
      let i = 0
      this.sentenceList.length = 0
      for(let item of res){
          item.key = i++
          this.sentenceList.push(item);
      }
      this.$nextTick(function(){
        let div = this.$refs.sentencePart
        div.scrollTop = div.scrollHeight
      })
      this.finishUpdate()
      }, (error) => {
        this.openNotification('NOK','获取对话记录失败','服务器开了会儿小差,请刷新重试!')
      })
    },
    openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),
      });
    }
  },
  mounted(){
    // this.updateTalkList()
    this.finishUpdate()
  }
};
</script>
<style lang="scss" scoped>
.flexTalk{
    position: fixed;
    z-index: 1000;
    float:right;
    right:5px;
    bottom:100px;
}
.talkAll{
    width: 400px;
    height: 200px;
    border: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 1%;
    display: block;
    .talkPart{
        width:400px;
        height: 200px;
        .sentencePart{
          width:100%;
          height: 150px;
          border-bottom: 1px solid rgba(0,0,0,0.2);
          overflow-y: scroll;
          overflow-x: hidden;
        }
        .sendPart{
          width:100%;
          height:50px;
          padding:8px;
        }
    }
}
table{
  width: 100%;
  display: block;
  padding-left: 1%;
  padding-right: 1%;
  tr{
    width: 100%;
    margin-top: 1%;
    display: flex;
    td{
      width: 50%;
      h1.type1{
        width: auto;
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 5px;
        padding-bottom: 5px;
        height: auto;
        border-radius: 10px;
        background-color: rgba(80, 126, 100, 0.78);
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        text-align: left;
        font-family: Roboto;
        border: 1px solid rgba(255, 255, 255, 1);
        word-break:break-all; 
        float: right;
        margin-right: 2%
      }
      h1.type2{
        width: auto;
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 5px;
        padding-bottom: 5px;
        height: auto;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(80, 126, 100, 0.78);
        font-size: 16px;
        text-align: left;
        font-family: Roboto;
        border: 1px solid rgba(80, 126, 100, 0.78);
        word-break:break-all; 
        float: left;
      }
      
    }
  }
}

::-webkit-scrollbar-track
{
	box-shadow: inset 0 0 6px rgba(80, 126, 100, 0.78);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(80, 126, 100, 0.78);
	background-color: rgba(173, 226, 196, 0.78);
}

.message {
  width: 400px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 1.1rem;
  .login {
    display: inline-block;
    width: 80px;
    color: #507e64;
    height: 50px;
  }
}

@keyframes showCard {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes hideCard {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}

.card {
  .show {
    display: block;
    animation: showCard 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  }
  .hide {
    animation: hideCard 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  }
}

</style>